<template>
    <div class="notice-item" @click="$emit('click')">
        <i class="oa-icon checkbox" v-show="showDelete" :class="selected ? 'icon-check-selected':'icon-check-normal'"></i>
        <div class="title">
            {{title}}
        </div>
        <div class="time">
            {{time}}
        </div>
    </div>
</template>

<script>
    export default {
        name: "oa-notice-item",
        props: {
            title: {
                default: ""
            },
            time: {
                default: ""
            },
            showDelete: {
                default: false
            },
            selected: {
                selected: false
            }
        },
        data(){
            return {
                checked: false
            }
        },

        methods: {
            onCheckedChange(){

            }
        }
    }
</script>

<style scoped lang="less">
    @import "../assets/style/theme";

    .notice-item {
        background: #ffffff;
        box-sizing: border-box;
        border-bottom: solid 1px #e0e0e0;
        min-height: 60px;
        display: flex;
        flex-direction: row;
        padding: 12px;
        transition: all .3s;
        .title {
            font-size: 16px;
            color: #2c2c2c;
            flex: 1;
            transition: all .3s;
        }
        .time {
            width: 80px;
            color: #888888;
            text-align: right;
            font-size: 12px;
        }
        .checkbox {
            transition: all .3s;
            font-size: 20px;
            margin-right: 12px;
            color: #41a6f0;

        }
    }
</style>